<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/tiles2/common.jsp" %>
<c:set var="p" value="${products}" />
<article>
	<div class="sub1"></div>
		<img src="img/product/${p.pcate1 }/${p.pcate2 }/slider/${p.pno}/${p.img2 }.jpg">
	<div class="sub2"><p class="subtext">[${p.pname }]</p></div>
	
	<form id="orderfrm" >
	<div class="pro_list">
		<table class="pro_table1">
			<caption>상품옵션</caption>
			<tbody>
				<tr class="pro_listtr">
					<td colspan="2">Price :</td>
					<td colspan="2">${p.price }</td>
				</tr>
				<tr class="pro_listtr">
					<td colspan="2">Code :</td>
					<td colspan="2">${p.pname }</td>
				</tr>
			</tbody>
		</table>
	
		<table class="pro_table2">
		
			<caption>&nbsp;</caption>
			<tbody>
				<tr class="pro_listtr">
					<td colspan="2">Size :</td>
					<td colspan="2">
						<select class="inputsize1" id="size" name="size">
							<option>XL</option>
							<option>L</option>
							<option>M</option>
						</select>
					</td>
				</tr>
				<tr class="pro_listtr">
					<td colspan="2">수량 :</td>
					<td colspan="2">
						<input type="text" class="inputsize2" id="cnum" name="cnum" value="1">
						<span class="btns">
							<button type="button" class="btn_up" id="btnup">△</button>
							<button type="button" class="btn_up" id="btndown">▽</button>
							<a class="btn_down" href=""></a>
						</span>
					</td>
					
				</tr>
			</tbody>
		</table>
		<p class="font16">50,000 원 이상 구매시 무료배송 (배송료 2,500원)상품 수령일로부터 7일 이내 반품/환불 가능합니다. 
		변심 반품의 경우 왕복배송비를 차감한 금액이 환불되며, 제품 및 포장 상태가 재판매 가능하여야 합니다</p>
	</div><!-- 상품 옵션 -->
	<div class="b-bottom">
		<div class="b-bottom1">
			<button class="btn btn-large btn-block btn-primary cart-odbtn1" type="button" id="cartbtn" >Cart</button>
			<button class="btn btn-large btn-block cart-odbtn2" type="button" id="orderbtn" >Order</button>
		</div>
	</div><!-- 상품 주문 -->
<%-- 	<input type="hidden" name="pno" value="${p.pno}" />
 --%>	<input type="hidden" name="price" value="${p.price}" />
	<input type="hidden" name="pname" value="${p.pname}" />
	<input type="hidden" name="uid" value="${sessionScope.loginUID}" />
	<input type="hidden" name="img1" value="${p.img1}" />
	</form>
	
	<div id="m">
		<div id="carousel-example-generic" class="carousel slide"
			data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0"
					class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				<li data-target="#carousel-example-generic" data-slide-to="3"></li>
				<li data-target="#carousel-example-generic" data-slide-to="4"></li>
			</ol>
			<!-- Wrapper for slides -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="img/product/${p.pcate1 }/${p.pcate2 }/slider/${p.pno}/${p.img3 }.jpg" alt="...">
				</div>
				<div class="item">
					<img src="img/product/${p.pcate1 }/${p.pcate2 }/slider/${p.pno}/${p.img4 }.jpg" alt="...">
				</div>
				<div class="item">
					<img src="img/product/${p.pcate1 }/${p.pcate2 }/slider/${p.pno}/${p.img5 }.jpg" alt="...">
				</div>				
				<div class="item">
					<img src="img/product/${p.pcate1 }/${p.pcate2 }/slider/${p.pno}/${p.img6 }.jpg" alt="...">
				</div>	
				<div class="item">
					<img src="img/product/${p.pcate1 }/${p.pcate2 }/slider/${p.pno}/${p.img7 }.jpg" alt="...">
				</div>				
			</div>
			<!-- Controls -->
			<a class="left carousel-control" href="#carousel-example-generic"
				data-slide="prev"><span
				class="glyphicon glyphicon-chevron-left"></span>
			</a> 
			<a class="right carousel-control" href="#carousel-example-generic"
				data-slide="next"><span
				class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>
	</div><!-- slider -->
	<div>
		<table class="sizetable">
			<colgroup>
				<col style="width:15%" />
				<col style="width:20%" />
				<col style="width:15%" />
				<col style="width:20%"  />
				<col style="width:15%" />
				<col style="width:15%" />
			</colgroup>
			
			<tr class="sizetr">
				<th>size</th><th>가슴단면</th><th>어깨</th><th>소매길이</th>
				<th>밑단</th><th>총기장</th>
			</tr>
			<c:forEach var="i" begin="1" end="3">
			<tr >
				<th>*</th><th>*</th><th>*</th><th>*</th>
				<th>*</th><th>*</th>
			</tr>
			</c:forEach>
		</table><!-- 옷사이즈 테이블 -->
		<div class="washing">
			<p class="font11">*세탁방법(washing instruction)<br/>
				원단 및 프린팅의 보호를 위해 <strong class="strong">가볍게 손세탁</strong>해주세요.<br/>
				드라이 클리닝 가능합니다.중성세제를 사용하여야 하며, 염소계 표백제 사용을 금지합니다.<br/>
				비틀어 짜지 마세요 (옷걸이에 걸어서 말리면 늘어짐이 발생할 수 있습니다).<br/>
				단 시간에 세탁하셔야 하며,<strong class="strong"> 절대 물에 담가 두지 마세요.</strong>세탁기 사용 절대 불가능 합니다.<br/>
			</p>
		</div>
	</div><!-- 옷사이즈 -->
	
	<div class="fabric">
		<div>
			<img src="img/view/fabric.jpg">
		</div>
	</div><!-- fabric -->
	
	<div class="mcomment">
		<h2>평점 / 댓글</h2>
			<div id="starcommt">
				<form >
					<div id="starsrating">
					<img src="img/star.png" id="starimg" /> 
					<select name="stars" id="stars">
						<option value="10" data-image="img/star.png">별10</option>
						<option value="9" data-image="img/star.png">별9</option>
						<option value="8" data-image="img/star.png">별8</option>
						<option value="7" data-image="img/star.png">별7</option>
						<option value="6" data-image="img/star.png">별6</option>
						<option value="5" data-image="img/star.png">별5</option>
						<option value="4" data-image="img/star.png">별4</option>
						<option value="3" data-image="img/star.png">별3</option>
						<option value="2" data-image="img/star.png">별2</option>
						<option value="1" data-image="img/star.png">별1</option>
						<option value="0" data-image="img/star.png">별0</option>
					</select>
					</div>
					<div id="commtext">
						<textarea name="comment" id="comment" placeholder="댓글 작성"></textarea>
					</div>
					
					<input type="hidden" name="cpage" value="1" />

					<div id="btn">
						<button type="submit" id="testbutton" class="btn btn-warning">등 록</button>
					</div>
				</form>
			</div>
			<div id="content5">
				<table>
					<colgroup>
						<col style="width: 10%" />
						<col style="width: 10%" />
						<col style="width: 70%" />
						<col style="width: 10%" />
					</colgroup>
					<!-- 제목행 시작 -->
					<tr >
						<th><h4>NUM</h4></th>
						<th><h4>STARS</h4></th>

						<th><h4>COMMENT</h4></th>
						<th><h4>DATE</h4></th>
					</tr>
					<!-- 제목행 끝 -->
					<c:forEach var="v" begin="1" end="10">
						<!-- 본문행 출력시작 -->
						<tr class="font15">
							<td>*</td>
							<td>*</td>
							<td><div class="commview">*</div></td>
							<td>*</td>

						</tr>
						<!-- 본문행 출력끝 -->
						<%-- 게시물 글번호 수정 --%>
						<c:set var="startbno" value=" " />
					</c:forEach>
				</table>
			</div>
		</div>
</article>
<script type="text/javascript">
	$("#btnup").on("click",function(event){
		$("#cnum").val(eval($("#cnum").val())+1);
	});
	$("#btndown").on("click",function(event){
		if(eval($("#cnum").val()) > 1){
		$("#cnum").val(eval($("#cnum").val())-1);
		}
	});
</script>
<script>
	//본문 줄바꿈 처리
	var c = document.getElementById("synop");
	c.innerHTML = c.innerHTML.replace(new RegExp('\r?\n', 'g'), "<br />");
	var c2 = document.getElementsByClassName("commview");
	for (var i = 0; i<c2.length; ++i){
		c2[i].innerHTML = c2[i].innerHTML.replace(new RegExp('\r?\n', 'g'), "<br />");
	}
</script>
<script>
	//장바구니 이동
	var uid = '${sessionScope.loginUID }';
	$("#cartbtn").on( "click", function(event) {
		if(uid != ""){
			alert("장바구니로 이동해요");
			$("#orderfrm").attr("method", "post");
			$("#orderfrm").submit();
		}else{
			alert("로그인 하셔야합니다");
			location.href="<c:url value='/man/view.mvc?pno=${p.pno}'/>";
		}
	} );
	$("#orderbtn").on( "click", function(event) {
		if(uid != ""){
			alert("구매창으로 이동해요");
			$("#orderfrm").attr("method", "post");
			$("#orderfrm").submit();
		}else{
			alert("로그인 하셔야합니다");
			location.href="<c:url value='/man/view.mvc?pno=${p.pno}'/>";
		}
	} );
</script>














